<template>
	<view>
		<u-popup :show="show" :round="10" :closeable="true" mode="bottom" @close="close" :safeAreaInsetBottom="false">
			<view class="reduce bf p15 f18 f-y-bt" @tap.stop>
				<view class="f-x-bt wei f20">
					<view class="dfa f-c f-g-1">修改会员等级</view>
				</view>
				<view class="overflowlnr p-5-0 f16 mt10">
					当前会员等级：<text style="color: #FD8906;">
						<text style="padding-right:10upx">
							{{form.name || ''}}<text class="ml5">(vip{{form.level || ''}})</text>
						</text>
					</text>
				</view>
				<view class="uScroll pb10">
					<view class="mt20">
						<view class="m15 c9 f14 mb10">修改等级：<text class="cf5 pl5 wei6 f15">*</text></view>
						<u-radio-group v-model="form.vipId" placement="column" :activeColor="subColor" iconColor="#000">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in list" :key="index"
								:label="`${item.name}(VIP${item.level})`" :name="item.id">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="f-1 f-y-e">
					<u-button @click="close" :customStyle="{marginRight:'10px'}"><text class="c0">取消</text></u-button>
					<u-button color="#FDDA34" @click="confirm"><text class="c0">确认</text></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import keybored from '@/components/liujto-keyboard/keybored.vue';
	import {
		mapState,
	} from 'vuex'
	export default {
		components: {
			keybored,
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				show: false,
				form: {},
				list: [],
			}
		},
		computed: {
			...mapState({
				reasonConfig: state => state.config.reasonConfig,
			}),
		},
		methods: {
			open(v) {
				this.form = v
				this.form.vipId = v.id
				this.getVipList()
				this.show = true
			},
			close() {
				this.form.vipId = ''
				this.show = false
			},
			async getVipList() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.vipList
				})
				this.list = list
			},
			confirm() {
				if (this.form.vipId) {
					this.$emit('handeditVip', this.form.vipId)
				} else {
					uni.$u.toast('请选择会员等级');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reduce {
		width: 100vw;
		overflow: hidden;
		border-radius: 20rpx;

		.uScroll {
			height: 580rpx;
			overflow: hidden;
			overflow-y: scroll;
		}

		.tabs {
			display: inline-flex;
			border-radius: 6px;
			background: #eeeeee;

			.tab_i {
				padding: 8px 15px;
			}
		}

		.bffd {
			background: #FDDA34;
		}

		.dis {
			padding: 8px 0;
			width: 23%;
			border: 1px solid #e6e6e6;
		}

		// .key {
		// 	/deep/.ljt-keyboard-body {
		// 		border-radius: 10px;
		// 		border: 1px solid #e5e5e5;

		// 		/deep/.ljt-keyboard-number-body {
		// 			width: 320px !important;
		// 			height: 200px !important;
		// 		}

		// 		.ljt-number-btn-confirm-2 {
		// 			background: #FDDA34 !important;
		// 		}
		// 	}
		// }

		.reson_i {
			position: relative;
			display: inline-block;
			border: 1px solid #e6e6e6;
			padding: 8px 15px;

			.r_gou {
				display: none;
				position: absolute;
				top: 0px;
				right: 0px;
				width: 0;
				height: 0;
				border-top: 10px solid #4275F4;
				border-right: 10px solid #4275F4;
				border-left: 10px solid transparent;
				border-bottom: 10px solid transparent;
			}

			.icon-duigou {
				display: none;
				position: absolute;
				top: -2px;
				right: -2px;
				transform: scale(0.6);
			}
		}

		.acreson_i {
			border: 1px solid #FD8906;
			background: #fff9dd;

			.r_gou,
			.icon-duigou {
				display: block;
			}
		}
	}
</style>